<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="font-size: 16px; color: black; padding: 0 10px; line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; margin-top: -10px;"><blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; border-left-color: rgb(239, 112, 96); background: #fff9f9;">
<p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0px; color: black; line-height: 26px;">如何使用带有reduce的Promise以及如何在串行和并行处理之间进行选择</p>
<p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0px; color: black; line-height: 26px;">本文译自<a href="https://advancedweb.hu/how-to-use-async-functions-with-array-reduce-in-javascript/" style="text-decoration: none; word-wrap: break-word; font-weight: bold; color: rgb(239, 112, 96); border-bottom: 1px solid rgb(239, 112, 96);">How to use async functions with Array.reduce in Javascript -  <strong style="font-weight: bold; color: black;">Tamás Sallai</strong> </a>。</p>
</blockquote>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">在<a href="https://advancedweb.hu/asynchronous-array-functions-in-javascript/" style="text-decoration: none; word-wrap: break-word; font-weight: bold; color: rgb(239, 112, 96); border-bottom: 1px solid rgb(239, 112, 96);">第一篇文章中</a>，我们介绍了async / await 如何帮助执行异步命令，但在异步处理集合时却无济于事。在本文中，我们将研究<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">reduce</code>函数，它是功能最丰富的集合函数，因为它可以模拟所有其他函数。</p>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span class="prefix" style="display: none;"></span><span class="content" style="display: inline-block; font-weight: bold; background: rgb(239, 112, 96); color: #ffffff; padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">1.  Array.reduce</span><span class="suffix"></span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid #efebe9; border-right: 20px solid transparent;"> </span></h2>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">Reduce 迭代地构造一个值并返回它，它不一定是一个集合。这就是名字的来源，因为它减少了收集到的值。</p>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">迭代函数获取先前的结果（ <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">memo</code> 在下面的示例中调用）以及当前值<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">e</code>。</p>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">以下函数对元素进行求和，从0开始（第二个参数 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">reduce</code>）：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;arr&nbsp;=&nbsp;[<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">1</span>,&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">2</span>,&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">3</span>];<br><br><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;syncRes&nbsp;=&nbsp;arr.reduce(<span class="hljs-function" style="color: #DCDCDC; line-height: 26px;">(<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;">memo,&nbsp;e</span>)&nbsp;=&gt;</span>&nbsp;{<br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span>&nbsp;memo&nbsp;+&nbsp;e;<br>},&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">0</span>);<br><br><span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">console</span>.log(syncRes);<br><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">//&nbsp;6</span><br></code></pre>
<table data-tool="mdnice编辑器" style="display: table; text-align: left;">
<thead>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<th style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; font-weight: bold; background-color: #f0f0f0; text-align: center;">memo</th>
<th style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; font-weight: bold; background-color: #f0f0f0; text-align: center;">e</th>
<th style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; font-weight: bold; background-color: #f0f0f0; text-align: center;">结果</th>
</tr>
</thead>
<tbody style="border: 0;">
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">0（初始）</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">1个</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">1个</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: #F8F8F8;">
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">1个</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">2</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">3</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">3</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">3</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">（最终结果）6</td>
</tr>
</tbody>
</table>
<figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/8fc6f3c9-4b29-43f1-9662-743f72a44553.png" alt="The reduce function" style="display: block; margin: 0 auto; max-width: 100%;"><figcaption style="margin-top: 5px; text-align: center; color: #888; font-size: 14px;">The reduce function</figcaption></figure>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span class="prefix" style="display: none;"></span><span class="content" style="display: inline-block; font-weight: bold; background: rgb(239, 112, 96); color: #ffffff; padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">2.  异步 <code>reduce</code></span><span class="suffix"></span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid #efebe9; border-right: 20px solid transparent;"> </span></h2>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">异步版本几乎相同，但每次迭代都会返回一个Promise，因此 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">memo</code> 将是先前结果的Promise。迭代函数需要 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">await</code> 它才能计算下一个结果：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">//&nbsp;utility&nbsp;function&nbsp;for&nbsp;sleeping</span><br><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;sleep&nbsp;=&nbsp;<span class="hljs-function" style="color: #DCDCDC; line-height: 26px;">(<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;">n</span>)&nbsp;=&gt;</span>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">new</span>&nbsp;<span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">Promise</span>(<span class="hljs-function" style="color: #DCDCDC; line-height: 26px;">(<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;">res</span>)&nbsp;=&gt;</span>&nbsp;setTimeout(res,&nbsp;n));<br><br><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;arr&nbsp;=&nbsp;[<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">1</span>,&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">2</span>,&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">3</span>];<br><br><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;asyncRes&nbsp;=&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;arr.reduce(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">async</span>&nbsp;(memo,&nbsp;e)&nbsp;=&gt;&nbsp;{<br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;sleep(<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">10</span>);<br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span>&nbsp;(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;memo)&nbsp;+&nbsp;e;<br>},&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">0</span>);<br><br><span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">console</span>.log(asyncRes);<br><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">//&nbsp;6</span><br></code></pre>
<table data-tool="mdnice编辑器" style="display: table; text-align: left;">
<thead>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<th style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; font-weight: bold; background-color: #f0f0f0; text-align: center;">memo</th>
<th style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; font-weight: bold; background-color: #f0f0f0; text-align: center;">e</th>
<th style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; font-weight: bold; background-color: #f0f0f0; text-align: center;">结果</th>
</tr>
</thead>
<tbody style="border: 0;">
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">0（初始）</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">1</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">Promise (1)</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: #F8F8F8;">
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">Promise (1)</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">2</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">Promise (3)</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">Promise (3)</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">3</td>
<td style="font-size: 16px; border: 1px solid #ccc; padding: 5px 10px; text-align: center;">（最终结果）Promise (6)</td>
</tr>
</tbody>
</table>
<figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/cf4c4554-3235-464f-8b3d-8f714f896780.png" alt="Async reduce function" style="display: block; margin: 0 auto; max-width: 100%;"><figcaption style="margin-top: 5px; text-align: center; color: #888; font-size: 14px;">Async reduce function</figcaption></figure>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">使用的结构<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">async (memo, e) =&gt; await memo</code>，<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">reduce</code>可以处理任何异步功能，并且可以对其进行<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">await</code>编辑。</p>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span class="prefix" style="display: none;"></span><span class="content" style="display: inline-block; font-weight: bold; background: rgb(239, 112, 96); color: #ffffff; padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">3.  定时</span><span class="suffix"></span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid #efebe9; border-right: 20px solid transparent;"> </span></h2>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">当在 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">reduce</code> 中并发时有一个有趣的属性。在同步版本中，元素被一对一处理，这并不奇怪，因为它们依赖于先前的结果。但是，当异步 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">reduce</code> 运行时，所有迭代函数将开始并行运行，<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">await memo</code>仅在需要时才等待上一个结果。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content">3.1  await memo last</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">在上面的示例中，所有 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">sleep</code> 并行执行 ，因为<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">await memo</code>使得函数等待上一个函数完成后执行。</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;arr&nbsp;=&nbsp;[<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">1</span>,&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">2</span>,&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">3</span>];<br><br><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;startTime&nbsp;=&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">new</span>&nbsp;<span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">Date</span>().getTime();<br><br><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;asyncRes&nbsp;=&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;arr.reduce(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">async</span>&nbsp;(memo,&nbsp;e)&nbsp;=&gt;&nbsp;{<br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;sleep(<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">10</span>);<br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span>&nbsp;(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;memo)&nbsp;+&nbsp;e;<br>},&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">0</span>);<br><br><span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">console</span>.log(<span class="hljs-string" style="color: #D69D85; line-height: 26px;">`Took&nbsp;<span class="hljs-subst" style="color: #DCDCDC; line-height: 26px;">${<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">new</span>&nbsp;<span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">Date</span>().getTime()&nbsp;-&nbsp;startTime}</span>&nbsp;ms`</span>);<br><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">//&nbsp;Took&nbsp;11-13&nbsp;ms</span><br></code></pre>
<figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/9c6d1512-9208-4aa6-975c-4e28b631a9c8.png" alt=" Async reduce with &quot;await memo&quot; last " style="display: block; margin: 0 auto; max-width: 100%;"><figcaption style="margin-top: 5px; text-align: center; color: #888; font-size: 14px;"> Async reduce with "await memo" last </figcaption></figure>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content">3.2  await memo first</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">但是当<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">await memo</code>最先出现时，这些函数按顺序运行：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;arr&nbsp;=&nbsp;[<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">1</span>,&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">2</span>,&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">3</span>];<br><br><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;startTime&nbsp;=&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">new</span>&nbsp;<span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">Date</span>().getTime();<br><br><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;asyncRes&nbsp;=&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;arr.reduce(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">async</span>&nbsp;(memo,&nbsp;e)&nbsp;=&gt;&nbsp;{<br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;memo;<br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;sleep(<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">10</span>);<br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span>&nbsp;(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;memo)&nbsp;+&nbsp;e;<br>},&nbsp;<span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">0</span>);<br><br><span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">console</span>.log(<span class="hljs-string" style="color: #D69D85; line-height: 26px;">`Took&nbsp;<span class="hljs-subst" style="color: #DCDCDC; line-height: 26px;">${<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">new</span>&nbsp;<span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">Date</span>().getTime()&nbsp;-&nbsp;startTime}</span>&nbsp;ms`</span>);<br><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">//&nbsp;Took&nbsp;36-38&nbsp;ms</span><br></code></pre>
<figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/dcfc76be-659b-4f9e-8ad2-9b0a71fc505f.png" alt="Async reduce with &quot;await memo&quot; first" style="display: block; margin: 0 auto; max-width: 100%;"><figcaption style="margin-top: 5px; text-align: center; color: #888; font-size: 14px;">Async reduce with "await memo" first</figcaption></figure>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">这种行为通常不是问题，这意味着不依赖于先前结果的所有内容都将立即被计算出来，只有依赖部分正在等待先前的值。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content">3.3  当并行很重要时</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">但是在某些情况下，提前做一些事情可能是不可行的。</p>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">例如，我有一段代码可以打印不同的PDF，并使用 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">pdf-lib</code> 库将它们拼接到一个文件中。</p>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">实现 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">printPDF</code> 并行运行资源密集型功能：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;result&nbsp;=&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;printingPages.reduce(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">async</span>&nbsp;(memo,&nbsp;page)&nbsp;=&gt;&nbsp;{<br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;pdf&nbsp;=&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;PDFDocument.load(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;printPDF(page));<br><br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;pdfDoc&nbsp;=&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;memo;<br><br>&nbsp;(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;pdfDoc.copyPages(pdf,&nbsp;pdf.getPageIndices()))<br>&nbsp;&nbsp;.forEach(<span class="hljs-function" style="color: #DCDCDC; line-height: 26px;">(<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;">page</span>)&nbsp;=&gt;</span>&nbsp;pdfDoc.addPage(page));<br><br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span>&nbsp;pdfDoc;<br><br>},&nbsp;PDFDocument.create());<br></code></pre>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">我注意到当我有很多页面要打印时，它将占用过多的内存并减慢整个过程。</p>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;">一个简单的更改，使 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">printPDF</code> 调用等待上一个调用完成：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;result&nbsp;=&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;printingPages.reduce(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">async</span>&nbsp;(memo,&nbsp;page)&nbsp;=&gt;&nbsp;{<br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;pdfDoc&nbsp;=&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;memo;<br><br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">const</span>&nbsp;pdf&nbsp;=&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;PDFDocument.load(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;printPDF(page));<br><br>&nbsp;(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">await</span>&nbsp;pdfDoc.copyPages(pdf,&nbsp;pdf.getPageIndices()))<br>&nbsp;&nbsp;.forEach(<span class="hljs-function" style="color: #DCDCDC; line-height: 26px;">(<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;">page</span>)&nbsp;=&gt;</span>&nbsp;pdfDoc.addPage(page));<br><br>&nbsp;<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span>&nbsp;pdfDoc;<br><br>},&nbsp;PDFDocument.create());<br></code></pre>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span class="prefix" style="display: none;"></span><span class="content" style="display: inline-block; font-weight: bold; background: rgb(239, 112, 96); color: #ffffff; padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">4.  结论</span><span class="suffix"></span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid #efebe9; border-right: 20px solid transparent;"> </span></h2>
<p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(239, 112, 96);">reduce</code> 函数很容易转换为异步函数，但是要弄清楚并行性可能很棘手。幸运的是，它很少破坏任何东西，但是在一些资源密集型或速率受限的操作中，了解如何调用函数至关重要。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">推荐阅读</span><span class="suffix" style="display: none;"></span></h4>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: disc;">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;"><a href="https://mp.weixin.qq.com/s/39J2KO8h_cBKg3MWB63L7w" style="text-decoration: none; word-wrap: break-word; font-weight: bold; color: rgb(239, 112, 96); border-bottom: 1px solid rgb(239, 112, 96);">如何在 Array.forEach 中正确使用 Async</a></p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: black;"><a href="https://mp.weixin.qq.com/s/OtFsaLb2a26D0Uz4aFaoAw" style="text-decoration: none; word-wrap: break-word; font-weight: bold; color: rgb(239, 112, 96); border-bottom: 1px solid rgb(239, 112, 96);">如何在 Array.filter 中正确使用 Async</a></p>
</section></li></ul>
<figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/dfe070a7-6afd-4eb4-a844-cfa95521b102.png" alt="您的关注是莫大的鼓励 ❥(^_-)" style="display: block; margin: 0 auto; max-width: 100%;"><figcaption style="margin-top: 5px; text-align: center; color: #888; font-size: 14px;">您的关注是莫大的鼓励 ❥(^_-)</figcaption></figure>
</section>
</body>
</html>